<template>
  <div id="menu_header">
    <Row class="Main_header">
      <Col span="6">
        <span class="header_title" v-if="header_tab===1">
				</span>
				<!-- <span v-else @click="rollback" class="cursor header_title1">< 返回社区列表</span> -->
      </Col>
        <Col span="18" class="header_right">
          <ul>
						<li v-for="(item,index) in iHeader" :key="index"
							:class="{acive:acive == index}" @click="tab(index)">
							<router-link :to="{name:item.href}">{{item.name}}</router-link>
						</li>
						<li>
							<div v-if="loginsStatus"> 
								<dropdown trigger="click" style="margin-left: 20px">
									<img src="../../assets/img/reply_user_img.png" alt="">
									<dropdown-menu slot="list">
											<dropdown-item>退出</dropdown-item>
									</dropdown-menu>
								</dropdown>
							</div>
							<div v-else>
								<a href="#" @click="login">登录 </a>
								<Modal
									title="用户登录"
									v-model="loginModel"
									@on-ok="loginOk"
									@on-cancel="cancel">
									<header>
										<span v-if="loginMode">使用邮箱、密码登录</span>
										<span v-else>使用手机号码登录</span>
									</header>
									<div>
										<Form ref="form" :model="form" :rules="ruleInline">
											<FormItem prop="email">
												<Input type="text" v-model="form.email" placeholder="请输入邮箱账号">
													<Icon type="ivu-icon ivu-icon-email" slot="prepend"></Icon>
												</Input>
											</FormItem>
											<FormItem prop="password">
												<Input type="password" v-model="form.password" placeholder="请输入密码">
													<Icon type="ios-locked-outline" slot="prepend"></Icon>
												</Input>
											</FormItem>
										</Form>
									</div>
									<div>
									</div>
							</Modal>
							</div>
						</li>
					</ul>
        </Col>
    </Row>
  </div>
</template>
<script>
	import {mapState,mapActions} from 'vuex'
	import {Header}  from 'public/options'
  
  export default{
    name:'iHeader',
    data(){
      return{
				loginModel:false,
				loginMode:true,
				acive:sessionStorage.header_Tab||0,
				iHeader:Header,
				form:{
					email:'',
					password:''
				},
				ruleInline:{
					email: [
						{ required: true, message: '邮箱不能为空！', trigger: 'blur' },{
							type:'email',message:'邮箱格式不正确！'
						}
					],
					password: [
							{ required: true, message: '密码不能为空！', trigger: 'blur' }
					]
				}
      }
		},computed:{
				...mapState(['header_tab','loginsStatus'])
		},
		methods:{
			...mapActions(['handover_header','postLogin']),
			tab(index){
				sessionStorage.header_Tab = index;
				this.acive = index;
			},
			login(){
				this.loginModel=true
			},
			loginOk(){
				this.$refs['form'].validate(now=>{
					if(now)
						this.$store.dispatch('postLogin',{
							LoginName:form.email,
							LoginPwd:password
						})
					else
						this.$nextTick(()=>this.loginModel = true)
				})
			},
			cancel(){
				this.$refs['form'].resetFields();
			},
			loginSubmit(form){
				
			}
			// rollback(){
			// 	this.$store.dispatch('handover_header',1)
      //   this.$router.push({name:'entry'})
      // }
		}
   
  }

</script>
<style scoped>
	#menu_header{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99;
	}
	.cursor{ 
		cursor:pointer;
	}
	
</style>
